<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>全选全不选</title>
		<style>
			body {
				text-align: center;
				font-family: "微软雅黑", "宋体";
				font-size: 15px;
			}
			
			table {
				margin: 50px auto;
				border-collapse: collapse;
			}
			
			table thead {
				background-color: deepskyblue;
			}
			
			table tr td {
				border: 1px solid darkgray;
			}
			
			#checkBox {
				width: 50px;
				height: 50px;
			}
			
			#vegetable {
				width: 200px;
				/*height: 30px;*/
			}
			
			#restorant {
				width: 60px;
			}
			
			#tbody {
				background-color: lightgray;
			}
			
			tbody tr:hover {
				background-color: white;
			}
		</style>
	</head>

	<body>
		<table>
			<thead>
				<tr>
					<td id="checkBox">
						<input type="checkbox" id="headInp" />
					</td>
					<td id="vegetable">菜名</td>
					<td id="restorant">饭店</td>
				</tr>
			</thead>
			<tbody id="tbody">
				<tr>
					<td id="checkBox">
						<input type="checkbox" />
					</td>
					<td id="vegetable">麻婆豆腐</td>
					<td id="restorant">饭店</td>
				</tr>
				<tr>
					<td id="checkBox">
						<input type="checkbox" />
					</td>
					<td id="vegetable">鱼香肉丝</td>
					<td id="restorant">饭店</td>
				</tr>
				<tr>
					<td id="checkBox">
						<input type="checkbox" />
					</td>
					<td id="vegetable">新疆大盘鸡</td>
					<td id="restorant">饭店</td>
				</tr>
			</tbody>

		</table>
		<script>
			//选取thead上面的复选框
			var topInp = document.getElementById("headInp");
			var tbody = document.getElementById("tbody");
			var inpArr = tbody.getElementsByTagName("input");
			//alert(inpArr.length);
			//实现全选跟全不选
			topInp.onclick = function() {
				for(var i = 0; i < inpArr.length; i++) {
					if(topInp.checked === true) {
						inpArr[i].checked = true;
					} else {
						inpArr[i].checked = false;
					}

				}
			}
			//
			for(var i = 0; i < inpArr.length; i++) {
				inpArr[i].onclick = function() {
					//检查每个选项的情况
					var bool = true;
					for(var j = 0; j < inpArr.length; j++) {
						if(inpArr[j].checked === false) {
							bool = false;
						}

					}
					topInp.checked = bool;
				}

			}
		</script>
	</body>

</html>